<template>
	<view class="content">
		<view class="topBox">
			<view class="list">
				<fui-text text="接口名称：" :size="30" font-weight="600"></fui-text>
				<fui-text :text="data.detail" :size="30"></fui-text>
			</view>
			<view class="list">
				<fui-text text="接口路径：" :size="30" font-weight="600"></fui-text>
				<fui-text :text="data.path" :size="30"></fui-text>
			</view>
			<view class="list">
				<fui-text text="接口协议：" :size="30" font-weight="600"></fui-text>
				<fui-text :text="data.type" :size="30"></fui-text>
			</view>
			<view class="list">
				<fui-text text="描述：" :size="30" font-weight="600"></fui-text>
				<fui-text :text="data.detail + '接口'" :size="30"></fui-text>
			</view>
		</view>

		<view class="buzhou">
			<view class="line" :style="{height: `${(list.length - 1)*100+60}rpx`}" />
			<view class="opBox" v-for="(item,index) in list" :key="index">
				<view class="yuan" :style="{backgroundColor: item.bcolor, border: item.border, color: item.color}">
					{{ index+1 }}
				</view>
				<view class="nameTitle">
					{{ index>0? `${item.title}${index}`:item.title }}
				</view>
				<view class="name">
					<fui-tag :text="item.name" theme="light"></fui-tag>
				</view>
			</view>
			<view v-if="type == 1" class="bohuiBox">
				<fui-text text="驳回原因：" :size="26"></fui-text>
				<fui-text text="未签订保密协议" :size="26"></fui-text>
			</view>
		</view>
		<view v-if="type == 0" class="bottomAnxiu">
			<view class="bohui" @tap="back">
				驳回
			</view>
			<view class="tongyi" @tap="back">
				同意
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance(); //获取上下文实例，ctx=vue2的this,=>proxy.tui
	const data = ref({})
	const type = ref(0)
	const current = ref(2)
	const items = ref([{
		title: '注册',
		text: '1'
	}, {
		title: '激活邮箱',
		text: '2'
	}, {
		title: '注册完成',
		text: '3'
	}])
	const list = ref([])
	onLoad((optoin) => {
		data.value = JSON.parse(optoin.data)
		type.value = optoin.type
		console.log(type.value);
		switch (type.value) {
			case '0':
				list.value = [{
					title: '发起人',
					name: '胡云',
					bcolor: '#ffffff',
					color: '#8a8a8a',
					border: '1rpx solid #8a8a8a'

				}, {
					title: '审批人',
					name: '李允礼',
					bcolor: '#ffffff',
					color: '#8a8a8a',
					border: '1rpx solid #8a8a8a'
				}, {
					title: '审批人',
					name: '李运',
					bcolor: '#ffffff',
					color: '#8a8a8a',
					border: '1rpx solid #8a8a8a'
				}, {
					title: '审批人',
					name: '张斐济',
					bcolor: '#ffffff',
					color: '#8a8a8a',
					border: '1rpx solid #8a8a8a'

				}]
				break;
			case '1':
				list.value = [{
					title: '发起人',
					name: '胡云',
					bcolor: '#ffffff',
					color: '#8a8a8a',
					border: '1rpx solid #8a8a8a'
				}, {
					title: '审批人',
					name: '李允礼',
					bcolor: '#ffffff',
					color: '#8a8a8a',
					border: '1rpx solid #8a8a8a'
				}, {
					title: '审批人',
					name: '李运',
					bcolor: '#D91C1A',
					color: '#FFFFFF',
					border: '1rpx solid #D91C1A'
				}]

				break;
			case '2':
				list.value = [{
					title: '发起人',
					name: '胡云',
					bcolor: '#ffffff',
					color: '#8a8a8a',
					border: '1rpx solid #8a8a8a'
				}, {
					title: '审批人',
					name: '李允礼',
					bcolor: '#ffffff',
					color: '#8a8a8a',
					border: '1rpx solid #8a8a8a'
				}, {
					title: '审批人',
					name: '李运',
					bcolor: '#ffffff',
					color: '#8a8a8a',
					border: '1rpx solid #8a8a8a'
				}, {
					title: '审批人',
					name: '张斐济',
					bcolor: '#95F203',
					color: '#FFFFFF',
					border: '1rpx solid #95F203'
				}]
				break;
			default:
				break;
		}
	})
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		box-sizing: border-box;

		.topBox {
			width: 100%;
			background-color: white;
			border-radius: 15rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.list {
				height: 60rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
		}

		.buzhou {
			background-color: white;
			border-radius: 15rpx;
			padding: 1rpx 30rpx 30rpx 40rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			position: relative;

			.line {
				position: absolute;
				background-color: #8a8a8a;
				height: 350rpx;
				margin-top: 40rpx;
				width: 2rpx;
				z-index: 10;
				/* 确保 .line 在其他元素的上方 */
				left: 69rpx;
			}

			.opBox {
				position: relative;
				margin-top: 40rpx;
				height: 60rpx;
				z-index: 100;
				display: flex;
				justify-content: center;
				align-items: center;

				.yuan {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 1rpx solid #8a8a8a;
					display: flex;
					background-color: white;
					justify-content: center;
					align-items: center;
					color: #8a8a8a;
				}

				.nameTitle {
					margin-left: 30rpx;
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 600;
				}

				.name {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 600;
				}
			}
		}
	}
	
	.bohuiBox{
		width: 100%;
		height: 200rpx;
		margin-top: 30rpx;
		border: 1rpx solid #8a8a8a;
		border-radius: 10rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.bottomAnxiu {
		position: absolute;
		bottom: 20rpx;
		height: 80rpx;
		width: calc(100% - 60rpx);
		padding: 10rpx 100rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.bohui {
			width: 150rpx;
			height: 100%;
			border: 1rpx solid #8a8a8a;
			border-radius: 10rpx;
			color: #8a8a8a;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}

		.tongyi {
			width: 150rpx;
			height: 100%;
			background-color: #007AFF;
			border-radius: 10rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
	}
</style>